<template>
	<view class="container">
		<!-- 顶部区域 -->
		<view class="header">
			<view class="back" @tap="hideSideBar">
				<uni-icons type="back" size="20" color="#333" />
				<text class="back-text">返回</text>
			</view>
			<view class="logo-container">
				<image src="/static/images/pethead.jpg" mode="aspectFit"></image>
				<text class="brand-text">PetMatch</text>
			</view>
		</view>
		<!-- 主要内容区域 -->
		<scroll-view class="content" scroll-y>
			<!-- 账户入口 -->
			<view class="section">
				<view class="menu-item">
					<uni-icons type="person" size="24" color="#333" />
					<text class="menu-text">登入/建立帐户</text>
					<uni-icons type="right" size="16" color="#999" />
				</view>
				<view class="menu-item">
					<uni-icons type="location" size="24" color="#333" />
					<text class="menu-text">新增地点/商户</text>
					<uni-icons type="right" size="16" color="#999" />
				</view>
			</view>
			<!-- 会员资讯 -->
			<view class="section">
				<view class="section-header" @click="toggleMember">
					<text class="section-title">会员资讯</text>
					<uni-icons :type="isMemberExpanded ? 'top' : 'bottom'" size="16" color="#999" />
				</view>
				<view class="section-content" v-if="isMemberExpanded">
					<view class="menu-item">
						<uni-icons type="gift" size="24" color="#333" />
						<text class="menu-text">会员优惠</text>
						<uni-icons type="right" size="16" color="#999" />
					</view>
					<view class="menu-item">
						<uni-icons type="ticket" size="24" color="#333" />
						<text class="menu-text">兑换优惠券</text>
						<uni-icons type="right" size="16" color="#999" />
					</view>
					<view class="menu-item">
						<uni-icons type="list" size="24" color="#333" />
						<text class="menu-text">我的订单</text>
						<uni-icons type="right" size="16" color="#999" />
					</view>
					<view class="menu-item">
						<uni-icons type="info" size="24" color="#333" />
						<text class="menu-text">关于PET-A-HOOD</text>
						<uni-icons type="right" size="16" color="#999" />
					</view>
					<view class="menu-item">
						<uni-icons type="staff" size="24" color="#333" />
						<text class="menu-text">邀请朋友</text>
						<uni-icons type="right" size="16" color="#999" />
					</view>
				</view>
			</view>
			<!-- 商户资讯 -->
			<view class="section">
				<view class="section-header" @click="toggleMerchant">
					<text class="section-title">商户资讯</text>
					<uni-icons :type="isMerchantExpanded ? 'top' : 'bottom'" size="16" color="#999" />
				</view>
			</view>
			<!-- 设置 -->
			<view class="section">
				<view class="section-header" @click="toggleSettings">
					<text class="section-title">设置</text>
					<uni-icons :type="isSettingsExpanded ? 'top' : 'bottom'" size="16" color="#999" />
				</view>
				<view class="section-content" v-if="isSettingsExpanded">
					<view class="menu-item">
						<uni-icons type="help" size="24" color="#333" />
						<text class="menu-text">常见问题</text>
						<uni-icons type="right" size="16" color="#999" />
					</view>
					<view class="menu-item">
						<uni-icons type="paperplane" size="24" color="#333" />
						<text class="menu-text">条款及细则</text>
						<uni-icons type="right" size="16" color="#999" />
					</view>
					<view class="menu-item">
						<uni-icons type="eye" size="24" color="#333" />
						<text class="menu-text">隐私政策</text>
						<uni-icons type="right" size="16" color="#999" />
					</view>
					<view class="menu-item">
						<uni-icons type="star" size="24" color="#333" />
						<text class="menu-text">App用户体验</text>
						<uni-icons type="right" size="16" color="#999" />
					</view>
				</view>
			</view>
			<!-- 版本信息 -->
			<view class="version">
				<text class="version-text">版本: 1.4.11</text>
			</view>
		</scroll-view>
	</view>
</template>
<script lang="ts" setup>
	import { ref } from 'vue'
	const emit = defineEmits(["close"]);
	const isMemberExpanded = ref(true)
	const isMerchantExpanded = ref(false)
	const isSettingsExpanded = ref(false)
	const toggleMember = () => {
		isMemberExpanded.value = !isMemberExpanded.value
	}
	const toggleMerchant = () => {
		isMerchantExpanded.value = !isMerchantExpanded.value
	}
	const toggleSettings = () => {
		isSettingsExpanded.value = !isSettingsExpanded.value
	}
	const hideSideBar = () => {
		emit('close')
	}
</script>
<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
		background-color: #f5f5f5;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 999;
	}

	.header {
		padding: 40rpx 30rpx;
		background-color: #ffffff;
	}

	.back {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.back-text {
		font-size: 14px;
		color: #333333;
		margin-left: 8rpx;
	}

	.logo-container {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20rpx;

		image {
			width: 120rpx;
			height: 120rpx;
		}
	}

	.logo {
		width: 120rpx;
		height: 80rpx;
	}

	.brand-text {
		font-size: 24px;
		color: #FF6B6B;
		font-weight: 600;
		margin-left: 20rpx;
	}

	.content {
		flex: 1;
		overflow: auto;
	}

	.section {
		margin-top: 20rpx;
		background-color: #ffffff;
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1px solid #f0f0f0;
	}

	.section-title {
		font-size: 16px;
		font-weight: 500;
		color: #333333;
	}

	.menu-item {
		display: flex;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1px solid #f0f0f0;
	}

	.menu-item:last-child {
		border-bottom: none;
	}

	.menu-text {
		flex: 1;
		font-size: 14px;
		color: #333333;
		margin-left: 20rpx;
	}

	.version {
		padding: 40rpx 0;
		text-align: center;
	}

	.version-text {
		font-size: 12px;
		color: #999999;
	}
</style>